<template>
  <view class="conter">
    <view v-if="isonSale" class="have-start">
     <view class="hrader">
       <ms-tabs class="tabs-mzy" :list="tabList" v-model="tebActive" itemColor='#262626' lineColor='#FF800C'
       	@input="handleChange" />
      </view>
      <view class="main">
        <view class="ticket-box"  v-for="(item,index) in ticketList" :key="item.id">
          <view class="min-ticket">
            <view class="title">{{ item.title }}</view>
          </view>
          <view class="ticket-list">
           <view class="price-num">
              <view class="prcie"><text style="font-size: 32rpx;">￥</text>{{ item.price }}</view>
              <view class="use-ticket">满{{ item.useTicket }}可用</view>
            </view>
            <view class='start-end-time'>
              <view class="ticket-name">{{ item.name }}</view>
              <view style="margin-bottom: 8rpx">开始事件：{{ item.staTime }}</view>
              <view>结束时间：{{ item.endTime }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 暂无数据 -->
    <view class="no-data" v-else>
      <view class="nodata-img"><image src="../../../static/nodata.jpg"></image></view>
      <view class="nodata-title">暂无优惠券</view>
    </view>
  </view>
</template>

<script>
  export default{
    data() {
      return{
        isonSale: true, 
        tebActive: 0,
        ticketList:[
          { id: 1, title: '满减券', price: 300, useTicket: '5000', name: '水滴思维系统课300元代金券', staTime: '2021.10.11 10:00:50', endTime: '2021.12.12 24:00:00' },
          { id: 2, title: '通用券', price: 100, useTicket: '0', name: '水滴思维系统课100元通用券', staTime: '2021.10.11 10:00:50', endTime: '2021.11.11 24:00:00' },
          { id: 3, title: '现金券', price: 50, useTicket: '300', name: '水滴思维系统课50元现金券', staTime: '2021.11.11 10:00:50', endTime: '2021.11.11 24:00:00' },
          { id: 4, title: '满减券', price: 99, useTicket: '500', name: '水滴思维系统课99元代金券', staTime: '2021.12.12 0:00:00', endTime: '2021.12.12 24:00:00' },
        ],
        tabList: [
          {id: 1, title: "可使用"}, {id: 2, title: '已使用' },
          {id: 3, title: '已过期'}
        ],
      }
    },
    onLoad() {
       this.$wechat.unseBehavior()
    }
  }
</script>

<style lang="scss" scoped>
  .conter{
     background: #F8F8F8;
     height: 100vh;
    .have-start{
      .hrader{
        width: 100%;
        display: flex;
        align-items: center;
        // padding: 20rpx 0;
        background: #FFFFFF;
         /deep/.tabBlock{
           margin: auto;
         }
        /deep/.tabBlock .tab__item-title {
        	margin: 0 56rpx;
        }
        /deep/ .tabBlock .tab__item{
          font-size: 28rpx;
          color: #8C8C8C;
        }
        /deep/ .tabBlock .tab__item--active{
          font-size: 28rpx;
          font-weight: bold;
          color: #262626 !important;
        }
        /deep/ .tab__line{
          width: 35rpx !important;
          height: 8rpx;
          border-radius: 4rpx;
        }
      }
      .main{
       padding: 16rpx 40rpx;
        .ticket-box{
          width: 100%;
          height: 320rpx;
          background: #FFFFFF;
          border-radius: 40rpx;
          padding: 20rpx 32rpx 32rpx 32rpx;
          margin-bottom: 16rpx;
          .min-ticket{
            width: 128rpx;
            height: 48rpx;
            background: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Coupon_frame_1.png')no-repeat;
            background-size: 100% 100%;
            text-align: center;
            line-height: 48rpx;
          }
          .title{
            font-size: 24rpx;
            color: #FFFFFF;
          }
          .ticket-list{
            width: 100%;
            height: 200rpx;
            background: url("https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Coupon_frame_2.png")no-repeat;
            background-size: 100% 100%;
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            .price-num{
              width: 200rpx;
              text-align: center;
              .prcie{
                font-size: 48rpx;
                font-weight: bold;
                color: #FF9E17;
              }
              .use-ticket{
                font-size: 24rpx;
                color: #FF9E17;
              }
            }
            .start-end-time{
              width: 376rpx;
              text-align: center;
              font-size: 20rpx;
              color: #8C8C8C;
              .ticket-name{
                font-size: 24rpx;
                color: #262626;
                margin-bottom: 56rpx;
              }
            }
          }
        }
      }
    }
    .no-data{
      margin-top: 30%;
      text-align: center;
      .nodata-img{
        width: 500rpx;
        height: 340rpx;
        margin: auto;
      }
      .nodata-title{
        font-size: 38rpx;
        font-weight: bold;
        margin-top:20rpx;
      }
    }
  }
  
</style>
